Menú imágenes con CSS

A veces da la sensación que cargamos demasiado el blog con adornos y accesorios, pero en ocasiones es necesario cuando la temática y finalidad lo requiere como es el caso de blogs dedicados a manualidades y ventas donde las imágenes juegan un papel importante.

Respondiendo una consulta reciente vamos a hacer algo sencillo y que nos llevará poco tiempo se trata de añadir unas imágenes que hagan las veces de menú y enlacen con las etiquetas del blog, de esa forma cada vez que marcamos sobre una imagen en concreto nos mostrará todas las entradas con la categoría asociada a esa imagen.

También es posible, que las imágenes enlacen con alguna página estática donde mostraremos una descripción o una galería todo queda a elección de cada uno. El resultado sería algo así:

Nos situamos en plantilla edición de HTML y justo antes de ]]></b:skin> añadimos los estilos:

/* Crosscol-imagen
----------------------------------------------- */
#crosscol-imagen {
height: 270px;
position: relative;
}
#crosscol-imagen .container {
width: 850px;
height: 180px;
overflow: hidden;
position: absolute;
top: 40px; 
left: 20px;  
}
#crosscol-imagen ul {
list-style-type: none;
width: 99999px;
position: absolute;
top: 0; left: 0;
}
#crosscol-imagen ul li {
float: left;
margin-right: 25px;
}
#crosscol-imagen ul li a {
width: 180px;
height: 160px;
display: block;
overflow: hidden;
-moz-border-radius:2px 2px 2px 2px;
-moz-box-shadow:2px 3px 5px #696969;
background:none repeat scroll 0 0 #FFFFFF;
filter: progid:DXImageTransform.Microsoft.Shadow(color=#C0C0C0,direction=125,strength=5);
border:1px solid #C0C0C0;
background-color: #fff; 
padding: 10px;
}
#crosscol-imagen ul li img { 
width: 180px; 
height: 160px;
}

Guardamos los cambios y editamos un nuevo gadget de HTML en el crosscol:

En su interior añadimos lo siguiente:

<div id='crosscol-imagen'>
<ul>
<li><a href='#'><img alt="" src="Url-imagen" /></a></li>
<li><a href='#'><img alt="" src="Url-imagen" /></a></li>
<li><a href='#'><img alt="" src="Url-imagen" /></a></li>
<li><a href='#'><img alt="" src="Url-imagen" /></a></li>
</ul>
</div>

Sustituimos la almohadilla de href='#'por la url que vamos a enlazar.
En Url-imagen añadimos la url de cada imagen, no es necesario que todas las imágenes tengan el mismo tamaño porque viene definido en los estilos y se mostrarán todas igual.